<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
<title>商品详情</title>
<link href="static/css/style.css" rel="stylesheet">
  <script>
    function ImgLoader(self) {
      self.parentNode.parentNode.style.visibility = "visible"
    }
  </script>
</head>
<body>
	<div class="content">
		<div class="goods-main">
			<div class="wrapper">
				<!--  多加一个 div  -->
				<!-- Banner -->
				<div class="banner">
					<div class="swiper-container">
						<div class="swiper-wrapper" style="visibility:hidden">
							<c:forEach items="${img}" var="imgs">
								<div class="swiper-slide photo100">
									<img src="${imgs}" width="100%" alt="" onload="ImgLoader(this)">
								</div>
							</c:forEach>
						</div>
						<div class="swiper-pagination"></div>
					</div>
					<!-- 添加预售图标 -->
					<c:if test="${goods.isAdvanceState == '01' }">
						<i class="icon-pre-sale db"></i>
					</c:if>
				</div>
				<!-- 产品信息  -->
				<dl class="goods-info bgwh">
					<dt class="name f32 tc">${goods.title }</dt>
					<input id="goodsId" type="hidden" value="${goods.id }">
					<dd class="auxiliary f24 tc g9">${goods.subTitle }</dd>
					<!-- 登录时显示 -->
					<c:if test="${null != loginId}">
						<dd class="price f24 tc text-primary">
							<em class="n f24">¥</em><em class="n f44 moneys"></em>
							<em class="n f28">.</em><em class="n f28 moneys"></em> 
								<em class="n f22 dib g9"></em>
						</dd>
					</c:if>
					<!-- 未登录时显示 -->
					<c:if test="${null == loginId}">
						<dd class="price f24 tc">
							<a class="not-logged-in dib text-primary" href="wap_app_login">登录查看商品价格</a>
						</dd>
					</c:if>
				</dl>
				<!--  -->
				<div class="mod-op mt20">
					<div class="cell f24 bgwh">
						<div class="cell__hd g9">选择规格</div>
						<div class="cell__bd f0">
							<c:forEach items="${priceRangeList}" var="priceRange"
								varStatus="state">
								<a
									class="btn-tag dib vm <c:if test="${state.index==0}">active</c:if>"
									data-number="${priceRange.minNum }"
									data-money="${priceRange.price}" href="javascript:;">${priceRange.minNum}${goods.unitDesc } </a>
							</c:forEach>
						</div>
					</div>
					<div class="cell f24 bgwh">
						<div class="cell__hd g9">购买数量 </div>
						<div class="cell__bd">
							<div class="mod-number">
								<span class="btn-number number-decrease ion-ios-minus-empty f40"></span>
								<!--  删除外层 div  -->
								<input class="number-input tc number-form" type="tel" min="${goods.minShopNum }"
									max="${goods.stockNum }" value="${goods.minShopNum }"> <span
									class="btn-number number-increase ion-ios-plus-empty f40"></span>
							</div>
						</div>
					</div>
				</div>
				<!-- 产品规格 -->
				<div class="bgwh standard">
					<div class="cell f24 standard-item ui-1px">
						<div class="cell__hd g9">包装规格</div>
						<div class="cell__bd">${goods.packing }</div>
					</div>
					<div class="cell f24 standard-item ui-1px">
						<div class="cell__hd g9">果径</div>
						<div class="cell__bd">${goods.fruitPath }</div>
					</div>
					<div class="cell f24 standard-item ui-1px">
						<div class="cell__hd g9">产地</div>
						<div class="cell__bd">${goods.originName }</div>
					</div>
					<c:forEach items="${goodsParametersList}" var="goodsParameter" varStatus="parameter">
						<div class="cell f24 standard-item ui-1px">
							<div class="cell__hd g9">${goodsParameter.paramName }</div>
							<div class="cell__bd">${goodsParameter.paramValue }</div>
						</div>
					</c:forEach>
				</div>
				<!-- speciality -->
				<!-- <div class="speciality mt10"></div> -->
				<!-- 预售 -->
				<c:if test="${goods.isAdvanceState == '01' }">
					<div class="pre-sale bgwh mt20">
						<p class="pre-sale__title f26 g6">预售时间节点：</p>
						<div class="timeline">
							<div class="timeline-item tc <c:if test="${timeResult == '1' }"> active </c:if>">
								<span class="dots dib">1</span>
								<dl>
									<dt class="timeline__name">开始预售</dt>
									<dd class="timeline__time">${goods.advanceStartTime }</dd>
								</dl>
							</div>
							<div class="timeline-item tc <c:if test="${timeResult == '2' }"> active </c:if>">
								<span class="dots dib">2</span>
								<dl>
									<dt class="timeline__name">停止预售</dt>
									<dd class="timeline__time">${goods.advanceEndTime }</dd>
								</dl>
							</div>
							<div class="timeline-item tc <c:if test="${timeResult == '3' }"> active </c:if>">
								<span class="dots dib">3</span>
								<dl>
									<dt class="timeline__name">预计发货</dt>
									<dd class="timeline__time">${goods.expectDeliveryTime }</dd>
								</dl>
							</div>
						</div>
					</div>
				</c:if>
				<!-- 购买须知 -->
				<div class="purchase-notes bgwh mt20">
					<span class="g9 f26 db pl20">购买须知:</span>
					<ul class="list f24 g6">
						<li class="item">1.所有商品下单时间为：每天6:00~18:00之间</li>
						<li class="item">2.买家订单在未确定收货之前，平台均支持退货</li>
						<li class="item">3.凡在本平台购买水果并下单，均免邮费</li>
						<li class="item">4.因新老包装更替，商品包装以实收为准</li>
					</ul>
				</div>
			
			<div class="tips-more js-tips tc">
				<span class="js-icon dib vm ion-chevron-down ion-chevron-up g9"></span>
				<span class="tips-more__text g0 f24 dib vm">上拉查看图文详情</span>
			</div>
      </div>
		</div>
		<!--  详情  -->
		<div class="detail-main bgwh">
			<div class="wrapper photo100">${goods.content }</div>
		</div>
	</div> 
	<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="static/js/lib/vendor.js"></script>
	<script type="text/javascript" src="static/js/lib/app.js"></script>
   <script src="//cdn.bootcss.com/iScroll/5.2.0/iscroll-lite.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var goodsId = $("#goodsId").val()
		//水果标签
		$.ajax({
			type: "get",
			url: '<%=basePath%>wap/goods/fruitLableList',
										data : {
											id : goodsId
										},
										success : function(data) {
											var parent = $('.speciality')
											var items = data.fruitLableList
											var length = items.length
											var html = ''
											if (length <= 0) {
												return false;
											}

											for (var i = 0; i < length; i++) {
												var item = items[i];
												html += '<div class="speciality-item"><span class="f20 g9 dib vm">'
														+ item.lableName
														+ '</span></div>'
											}
											parent.html(html)
										}
									})
						})
	</script>
   <script>
    function getNumber() {
      var ele = document.querySelector('.number-form')
      return ele.value;
    }
  </script>
	<link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
</body>
</html>
